import React, { useCallback, useState } from 'react'
import { Route, useRouteMatch, Switch, Redirect, useHistory } from 'react-router-dom'

import Intheaters from './Intheaters'
import Comingsoon from './Comingsoon'

import MyLink from '../navlink/MyLink'

export default function movies(props) {

  const { path } = useRouteMatch()
  const { push } = useHistory()

  const [tabs] = useState([
    {
      id: '001',
      title: '正在热映',
      path: `${path}/intheaters`
    },
    {
      id: '002',
      title: '即将上映',
      path: `${path}/comingsoon`
    }
  ])

  const handleClick = useCallback(() => {
    // push('/profile', {
    //   name: 'gp24',
    //   age: 100
    // })

    push('/profile?name=gp24&age=100')
  }, [])

  const handleExampleClick = useCallback(
    () => {
      push('/recursive')
    },
    [],
  )
  
  return (
    <>
      <ul>
        {
          tabs.map(tab => (
            <MyLink
              key={tab.id}
              route={tab}
              tag="li"
            ></MyLink>
          ))
        }
      </ul>
      <div>
        <Switch>
          <Route path={`${path}/intheaters`}>
            <Intheaters></Intheaters>
          </Route>
          <Route path={`${path}/comingsoon`}>
            <Comingsoon></Comingsoon>
          </Route>
          <Redirect from="/movies" to="/movies/intheaters"></Redirect>
        </Switch>

        <div style={{margin: '30px'}}>
          <button 
            style={{padding: '10px'}}
            onClick={handleClick}
          >goto profile</button>
        </div>

        <div style={{margin: '30px'}}>
          <button 
            style={{padding: '10px'}}
            onClick={handleExampleClick}
          >goto example</button>
        </div>
      </div>
    </>
  )
}
